<template>
  <header class="header card">
    <!--头像 -->
    <div class="avator">
      <el-avatar :size="100">
        <img alt="头像" src="@/assets/images/avatar/qqphoto.jpg" />
      </el-avatar>
      <div class="avator_name">不只是软件工程师</div>
    </div>
    <!--信息  -->
    <div class="info">
      <a class="link" href="https://wu-sili.gitee.io/resume/" target="_blank"
        >简历链接</a
      >
    </div>
    <!-- <div class="sjjh">社交账号</div>
    <div class="sjjh_icont_wrap">
      <el-tooltip class="sjjh_tip" placement="bottom">
        <div slot="content">
          <el-image
            style="width: 100px"
            :src="require('@/assets/images/avatar/qqQrcode.png')"
            fit="fill"
          ></el-image>
        </div>
        <i class="iconfont icon-qq"></i>
      </el-tooltip>
      <el-tooltip class="sjjh_tip" placement="bottom">
        <div slot="content">
          <el-image
            style="width: 100px"
            :src="require('@/assets/images/avatar/wechatQrcode.png')"
            fit="fill"
          ></el-image>
        </div>
        <i class="iconfont icon-weixin"></i>
      </el-tooltip>
      <a
        href="https://github.com/liyaxuanliyaxuan"
        class="iconfont icon-github"
      ></a>
    </div> -->
  </header>
</template>

<script>
export default {
  name: "Header",
};
</script>

<style lang="less" scoped>
header.header {
  padding: 20px 0;
  margin-top: 10px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
  text-align: center;

  .avator {
    .avator_name {
      padding: 10px 0;
      font-size: 26px;
      color: #000;
    }
  }

  .info {
    .sjjh {
      color: #666;
    }

    .sjjh_icont_wrap {
      margin-top: 10px;
      display: flex;
      justify-content: space-around;
      width: 100px;
    }

    .sjjh_icont_wrap a {
      text-decoration: none;
      color: #aaa;
    }

    .sjjh_icont_wrap .iconfont {
      font-size: 25px;
    }
  }
}
</style>
